<template lang="pug">
.line-chart-wrap
  ECharts.line-chart(
    ref='lineChart'
    auto-resize
    :options="options")
  span.btn-export.iconfont.icon-export(
    title='导出'
    @click="fileEvent('/pn/dpa/stat/influentEffluent/export')")
</template>
<script>
/**
 * @name PartionInfo 进出水量折线图
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示进出水量折线图
 *参数：
 */
import echarts from 'echarts'

export default {
  components: {
    echarts
  },
  props: {
    timeRange: Array,
    areaId: Number,
    interval: String
  },
  data () {
    return {
      options: {
        title: {
          text: '水量统计',
          x: 'center',
          y: 6
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: [{
          name: '水量(m³)',
          type: 'value'
        }],
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            y: '84%'
          },
          {
            show: true,
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: (param) => {
            let format = ''
            param.forEach((item, index) => {
              if (index === 0) format = param[0].name + '<br> &nbsp;'
              format = format.concat(item.marker + item.seriesName + '：' + (this.formatValue(item.value) || '-') + ' m³')
              if (index !== param.length - 1) format += '<br> &nbsp;'
            })
            return format
          },
          textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          },
          axisPointer: {
            type: 'cross',
            label: {
              show: false
            }
          }
        },
        grid: [
          {left: 50, right: 30, y: '15%', height: '60%'}
        ],
        legend: {
          data: ['供水量', '用水量'],
          y: '92%'
        },
        series: [{
          name: '供水量',
          data: [80, 92, 91, 94, 190, 130, 120],
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          markPoint: {
            symbol: 'pin',
            symbolSize: (value, params) => {
              let width = this.formatValue(value).length * 14
              width = (width < 40) ? 40 : width
              return [width, 40]
            },
            label: {
              formatter: ({seriesName, name, value}) => {
                return `${this.formatValue(value) || '-'}`
              }
            },
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          // markPoint: {
          //   symbolSize: 1,
          //   symbolOffset: [0, '50%'],
          //   label: {
          //     normal: {
          //       offset: [0, -15],
          //       formatter: ({seriesName, name, value}) => {
          //         return `${seriesName}${name}：${(this.formatValue(value) || '-') + ' m³'}`
          //       },
          //       backgroundColor: 'rgba(0,0,0,0.7)',
          //       borderRadius: 20,
          //       padding: [4, 10],
          //       lineHeight: 20,
          //       height: 20,
          //       distance: 20,
          //       opacity: 50,
          //       color: '#fff',
          //       textBorderColor: '#000',
          //       textBorderWidth: 1,
          //       fontSize: 12,
          //       fontWeight: 'bold',
          //       fontFamily: 'Microsoft YaHei'
          //     }
          //   },
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ]
          // },
          itemStyle: {
            normal: {
              color: '#0000EE'
            }
          },
          areaStyle: {
            normal: {
              color: 'rgba(0,0,238,0.4)'
            }
          }
        },
        {
          name: '用水量',
          data: [20, 32, 141, 34, 290, 330, 320],
          type: 'line',
          smooth: true,
          symbol: 'none',
          sampling: 'average',
          markPoint: {
            symbol: 'pin',
            symbolSize: (value, params) => {
              let width = this.formatValue(value).length * 14
              width = (width < 40) ? 40 : width
              return [width, 40]
            },
            label: {
              formatter: ({seriesName, name, value}) => {
                return `${this.formatValue(value) || '-'}`
              }
            },
            data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
            ]
          },
          // markPoint: {
          //   symbolSize: 1,
          //   symbolOffset: [0, '50%'],
          //   label: {
          //     normal: {
          //       offset: [0, -15],
          //       formatter: ({seriesName, name, value}) => {
          //         return `${seriesName}${name}：${(this.formatValue(value) || '-') + ' m³'}`
          //       },
          //       backgroundColor: 'rgba(0,0,0,0.7)',
          //       borderRadius: 20,
          //       padding: [4, 10],
          //       lineHeight: 20,
          //       height: 20,
          //       distance: 20,
          //       opacity: 50,
          //       color: '#fff',
          //       textBorderColor: '#000',
          //       textBorderWidth: 1,
          //       fontSize: 12,
          //       fontWeight: 'bold',
          //       fontFamily: 'Microsoft YaHei'
          //     }
          //   },
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ]
          // },
          itemStyle: {
            normal: {
              color: '#CD0000'
            }
          },
          areaStyle: {
            normal: {
              color: 'rgba(205, 0, 0, 0.4)'
            }
          }
        }]
      }
    }
  },
  mounted () {
  },
  methods: {
    getData () {
      this.$get({
        url: `/pn/dpa/stat/influentEffluent`,
        params: {
          'areaId': this.areaId,
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime(),
          'dateType': this.interval
        }
      }).then((res) => {
        // for (let i = 0; i < data.series.length; i++) {
        //   this.options.series[i].data = data.series[i].data
        //   this.options.xAxis[i].data = data.xAxis
        // }
        this.options.xAxis.data = res.data.xAxis.map(item => this.$moment(parseInt(item)).format('YYYY-MM-DD HH:mm'))
        this.options.series = res.data.series.map((item, index) => {
          return {
            ...this.options.series[index],
            data: item.data
          }
        })
      })
    },
    formatValue (data) {
      return (data === null || data === undefined) ? null : parseFloat(data).toFixed(3)
    },
    fileEvent (url, filterBy) {
      this.$get({
        url,
        params: {
          'areaId': this.areaId,
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime(),
          'dateType': this.interval
        }
      }).then((res) => {
        // 生成a标签，模拟click下载files
        if (!res.data) {
          this.$alert('导出失败！')
          return
        }
        let a = document.createElement('a')
        a.href = `/api/dxbase/download/${res.data.shortUrl}`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        event.stopPropagation()
        event.preventDefault()
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.line-chart-wrap
  width: 100%
  height: 100%
  position: relative
  .line-chart
    width: 100%
    height: 100%
    background-color: #fff
  .btn-export
    color: #a0a0a0
    font-size: 20px
    position: absolute
    right: 10px
    top: 10px
    cursor: pointer
</style>
